<template>
  <div>
    <label>{{label}}：</label>
    <div v-for="item in list" :key="item">
      <input type="checkbox" @change="checkboxChange" :value="item" v-model="arr">{{item}}
    </div>
  </div>
</template>
<script>
// 需求 1: 子组件 需要 提供 label 字段 显示 多选框的 label
// 需求 2: 子组件 需要 提供 list 字段，可以将多选项显示出来
// 需求 3: 在子组件里勾选时 需要把数据同步到父组件
export default {
  name: 'MyCheckbox',
  props: {
    label: {
      type: String,
      default: '兴趣爱好'
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    hobby:{
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      arr: []
    }
  },
  methods: {
    checkboxChange() {
      console.log(this.arr);
      this.$emit('update:hobby', this.arr)
    }
  },
};
</script>
